<template>
  <el-form :inline="true" size="small">
    <el-form-item label="展示单位" label-width="100px">
      <el-radio-group v-model="queryFrom.interval_type" size="small" @change="changeDate" >
        <el-radio-button label="day">日报</el-radio-button>
        <el-radio-button label="week">周报</el-radio-button>
        <el-radio-button label="month">月报</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="时间" label-width="80px">
      <!-- <el-date-picker v-model="queryFrom.target_time" :picker-options="pickerOptions2" :type="dateType" placeholder="选择日期" value-format="yyyy-MM-dd" @change="change" /> -->
      <el-date-picker v-model="queryFrom.target_time" :picker-options="pickerOptions2" :type="dateType" :value-format="vauleType" placeholder="选择日期" @change="change" />
    </el-form-item>
  </el-form>
</template>

<script>
import { pickerOptions2, pickerOptions3, yesterday, lastmonth } from '@/model/DateRange'

export default {
  name: 'LineFromChoose',
  data() {
    return {
      dateType: 'date',
      vauleType: 'yyyy-MM-dd',
      // pickerOptions2: pickerOptions3,
      pickerOptions2: '',
      queryFrom: {
        interval_type: 'day',
        target_time: yesterday
      }
    }
  },
  // created() {
  //   this.change()
  // },
  methods: {
    changeDate(value) {
      const obj = {
        day: pickerOptions3,
        week: pickerOptions2,
        month: pickerOptions3
      }
      if (value === 'month') {
        this.dateType = 'month'
        this.queryFrom.target_time = lastmonth
        // this.vauleType = 'yyyy-MM-01'
      }
      else {
        this.dateType = 'date'
        this.queryFrom.target_time = yesterday
      }
      this.pickerOptions2 = obj[value]
      this.$emit('change', this.queryFrom)
    },
    change() {
      this.$emit('change', this.queryFrom)
    }
  }
}
</script>
